import { useRef, useState } from "react";

export default function Form() {
  const [value, setValue] = useState("Change me");
  const inputRef=useRef<HTMLInputElement | null>(null)

//   const handleChange:React.ChangeEventHandler<HTMLInputElement>=(event)=> {
//     setValue(event.currentTarget.value);
//   }

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue(event.currentTarget.value);
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    // 禁用默认行为： 表单提交的跳转行为
    event.preventDefault();
    console.log(inputRef.current!.value);
    // console.log((inputRef.current as HTMLInputElement).value);
    
  };

  return (
    <>
      <input value={value} onChange={handleChange} />
      <p>值： {value}</p>
      <form onSubmit={handleSubmit}> 
        <input ref={inputRef} type="text" />
        <button type="submit">提交</button>
      </form>
    </>
  );
}